<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            height: 500px;
            border: solid 3rem rgba(0,0,0,.2);
            background-color: orange;
            padding: 3rem;
            background: url(../../../demo.jpg) no-repeat;
            background-origin: border-box;
        }
        .border{
            background-clip: border-box;
        }
        .padding{
            background-clip: padding-box;
        }
        .content{
            background-clip: content-box;
        }
        .text{
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            font-weight:bold;
            font-size:112px;
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <h3>background-origin 都设置为 border-box</h3>
    <br>
    <div class="box border"><h1>border-box</h1></div>
    <br>
    <div class="box padding"><h1>padding-box</h1></div>
    <br>
    <div class="box content"><h1>content-box</h1></div>
    <br>
    <div class="box text">text 仅webkit支持</div>
</body>
</html>